<template>
  <div>
    <Header
      @child-register="registerRe"
      @child-login="loginRe"/>
    <br><br><br>
    <!-- <p style="text-align:center;color:#606266">欢迎加入07ge</p> -->
    <p style="text-align:center;color:#606266">登录</p>
    <el-row type="flex" class="row-bg" justify="center">
    <el-col :xs="24" :sm="12" :md="10" :lg="8" :xl="6">
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="" class="demo-ruleForm">
      <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm2.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="验证码" prop="age">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="login('ruleForm2')">提交</el-button>
        <el-button @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    <p style="text-align:center;color:#909399">还没有07ge.com帐号? <span style="color:#409EFF"><a :href="domain + '/register'">去注册</a></span></p>
    <br>
    <p style="text-align:center;color:#909399"><a style="text-decoration:none;color:#909399" :href="domain + '/changePassword'">忘记密码</a></p>
    </el-col>
    </el-row>
    <Footer/>
  </div>
</template>

<script>
import config from '@/config/config.js'
import 'element-ui/lib/theme-chalk/display.css';
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
import CryptoJS from 'crypto-js'

  export default {
    components: {
        Header, Footer
    },
    data() {
      var checkEmail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        setTimeout(() => {
          // let myreg = new RegExp("^(?=.*[@])+(?=.*[.])")
          let myreg = new RegExp("^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$")

          if (!myreg.test(value)) {
            return callback(new Error('邮箱格式不对'));            
          } else {
            // return callback(new Error('OK')); 
            callback();           
          }
        }, 500);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (value.length < 8) {
          callback(new Error('密码至少有8位'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.ruleForm2.pass) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
      //     callback();
      //   }
      // };
      return {
        domain: '',
        ruleForm2: {
          pass: '',
          checkPass: '',
          email: ''
        },
        rules2: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          // checkPass: [
          //   { validator: validatePass2, trigger: 'blur' }
          // ],
          email: [
            { validator: checkEmail, trigger: 'blur' }
          ]
        }
      };
    },
    mounted() {
      this.domain = config.getDomain()
    },
    methods: {
      // 跳转
      registerRe() {
        window.location.href='/register'
      },
      loginRe() {
        window.location.href='/login'
      },
      // 登录
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/users/login',{
            email: this.ruleForm2.email,
            password:CryptoJS.MD5(this.ruleForm2.pass).toString()
            }).then(({status,data})=>{
              if(status===200){
                if(data&&data.code===0){
                  this.$message.success('注册成功2秒后进入首页');
                  setTimeout(()=>{
                    location.href = '/'
                  }, 2300)
                }else{
                  this.error=data.msg
                  this.$message.error(data.msg);
                }
              }else{
                this.error=`服务器出错`
              }
            })
          }
          // if (valid) {
          //   alert('submit!');
          // } else {
          //   console.log('error submit!!');
          //   return false;
          // }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style lang="scss">
.demo-ruleForm {
  text-align: center;
  padding-right: 5rem;
  padding-left: 5rem;
  margin: 3rem 0;
}
.hy {
  position: fixed;
  margin-top: 10rem;
  margin-left: 40rem;
  font-size: 20px;
  // text-align:right;
  // width: 100%;
  color:#F56C6C;
}
</style>